<!-- 积分设置弹窗 -->
<template>
  <el-dialog
    class="dialogAdapter"
    :destroy-on-close="true"
    style="border-radius: 10px"
    @close="handleClose"
    v-model="props.visible"
    :title="`${!type ? '创建' : '编辑'}二维码`"
  >
    <!--from -->
    <el-form :rules="state.rules" ref="ruleFormRef" :model="state.form" label-position="top">
      <el-form-item label="云珊科技" prop="name">
        <el-input type="text" v-model.number="state.form.name" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="背景图片" prop="background_file">
        <el-upload
          class="avatar-uploader"
          action="#"
          :http-request="handleRequestUpload"
          accept="image/jpg, image/jpeg, image/png"
          :show-file-list="false"
        >
          <img v-if="state.avatar" :src="state.avatar" class="cover-img" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="字体" prop="font">
        <el-select style="width: 100%" v-model="state.form.font" placeholder="请选择字体">
          <el-option label="lx.ttf" value="lx.ttf" />
        </el-select>
      </el-form-item>
      <el-form-item label="字体大小" prop="font_size">
        <el-input maxlength="5" type="text" v-model.number="state.form.font_size" placeholder="请输入次数" />
      </el-form-item>
      <el-form-item label="头像位置x" prop="avarta_x">
        <el-input type="text" v-model.number="state.form.avarta_x" placeholder="请输入头像位置x" />
      </el-form-item>
      <el-form-item label="头像位置y" prop="avarta_y">
        <el-input type="text" v-model.number="state.form.avarta_y" placeholder="请输入头像位置y" />
      </el-form-item>
      <el-form-item label="昵称位置x" prop="nickname_x">
        <el-input type="text" v-model.number="state.form.nickname_x" placeholder="请输入昵称位置x" />
      </el-form-item>
      <el-form-item label="昵称位置y" prop="nickname_y">
        <el-input type="text" v-model.number="state.form.nickname_y" placeholder="请输入昵称位置y" />
      </el-form-item>
      <el-form-item label="二维码位置x" prop="qrcode_x">
        <el-input type="text" v-model.number="state.form.qrcode_x" placeholder="请输入二维码位置x" />
      </el-form-item>
      <el-form-item label="二维码位置y" prop="qrcode_y">
        <el-input type="text" v-model.number="state.form.qrcode_y" placeholder="请输入头像位置y" />
      </el-form-item>
      <el-form-item label="所属项目" prop="authorization_id">
        <el-select style="width: 100%" v-model="state.form.authorization_id" placeholder="请选择所属项目">
          <el-option v-for="item in state.authorizationList" :key="item.name" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button :loading="loading" type="danger" @click="submitForm(ruleFormRef)"> 保存 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElMessage, FormInstance } from "element-plus"
import { onMounted, reactive, ref } from "vue"
import pubsub from "pubsub-js"

// @ts-ignore
import { APIAuthorizationList, APIQrcodexAdd } from "@/api/apiSetting"
import debounce from "@/utils/debounce"

interface Props {
  editData?: any
  type?: string
  visible: any
}

const emits = defineEmits(["editDpData", "close"])
const props = defineProps<Props>()
const ruleFormRef = ref()
const avatarImgFile = ref<any>(null)
const loading = ref<boolean>(false)

const state = reactive<any>({
  form: {
    name: "云珊科技", //名称
    background_file: "file ", //背景图片
    font: "lx.ttf", //字体 下拉
    font_size: "38", //字体大小,
    avarta_x: "80", //头像的位置
    avarta_y: "200", //昵称的位置
    nickname_x: "238", //昵称的位置
    nickname_y: "nickname_y", //二维码的位置
    qrcode_x: "100", //二维码的位置
    qrcode_y: "1100", //所属的项目：桃奢
    authorization_id: "" //所属的项目：桃奢
  },
  avatar: "",
  authorizationList: [],

  rules: {
    name: [{ required: true, message: "该项为必填项", trigger: "blur" }],
    background_file: [{ required: true, message: "该项为必填项", trigger: "blur" }],
    font: [{ required: true, message: "该项为必填项", trigger: "blur" }],
    font_size: [{ required: true, message: "该项为必填项", trigger: "blur" }],
    avarta_x: [{ required: true, message: "该项为必填项", trigger: "blur" }],
    avarta_y: [{ required: true, message: "该项为必填项", trigger: "blur" }],
    nickname_x: [{ required: true, message: "该项为必填项", trigger: "blur" }],
    nickname_y: [{ required: true, message: "该项为必填项", trigger: "blur" }],
    qrcode_x: [{ required: true, message: "该项为必填项", trigger: "blur" }],
    qrcode_y: [{ required: true, message: "该项为必填项", trigger: "blur" }],
    authorization_id: [{ required: true, message: "该项为必填项", trigger: "blur" }]
  }
})

// 上传头像
const handleRequestUpload = debounce((file: any) => {
  if (file) {
    const allowedFormats = ["image/jpeg", "image/jpg", "image/png"]
    if (!allowedFormats.includes(file.file?.type)) {
      ElMessage({
        type: "error",
        message: "格式错误，只能上传 jpeg / jpg / png 图片格式"
      })
      return
    }

    const URL = window.URL || window.webkitURL
    avatarImgFile.value = file.file
    const imgSrc = URL.createObjectURL(file.file)
    // isShowAvatar.value = true
    state.avatar = imgSrc
  }
}, 300)

// 项目列表
const getAuthorizationList = async () => {
  const { data, code } = await APIAuthorizationList({ page: 1 })
  if (code === 200) {
    state.authorizationList = data.list
  }
}

onMounted(async () => {
  console.log("props.editData", props.editData)
  if (props.editData && props.type) {
    state.form = props.editData
  }
  await getAuthorizationList()
})

// 提交
const submitForm = debounce((formEl: FormInstance | undefined) => {
  console.log(state.form, "state.form")
  loading.value = true
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      const { code } = await APIQrcodexAdd(!props.type ? "/qrcodex/add" : "/qrcodex/update", {
        ...state.form,
        background_file: avatarImgFile.value
      })
      if (code === 200) {
        handleClose()
        ElMessage({
          type: "success",
          message: "保存成功"
        })
        pubsub.publish("UPDATEQRCODELLIST")
        loading.value = false
      }
    } else {
      console.log("error submit!")

      return false
    }
  })
}, 300)

const handleClose = () => {
  emits("close")
}
</script>
<style lang="scss" scoped>
.avatar-uploader {
  position: relative;
  text-align: center;
  // margin-bottom: 20px;

  .cover-img {
    width: 200px;
    height: 200px;
  }

  .edit-svg {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 32px;
    height: 32px;
    border-radius: 20px 0px;
    opacity: 0.8;
  }
}

::v-deep .avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 20px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 200px;
  text-align: center;
}
:deep(.el-form-item__content) {
  justify-content: center;
}
</style>
